<script setup lang="ts">
import BorderBox13 from "@/components/datav/border-box-13";
import bg1 from '@/assets/img/item_bg1.png'
import bg2 from '@/assets/img/item_bg2.png'
import bg3 from '@/assets/img/item_bg3.png'
import bg4 from '@/assets/img/item_bg4.png'
import bg5 from '@/assets/img/item_bg5.png'
const props = withDefaults(
  defineProps<{
    // 标题
    title: number | string;
    backgroundImage: number;
  }>(),
  {
    title: "",
    backgroundImage: 0
  }
);

const bgs = ['',bg1, bg2, bg3, bg4, bg5]

</script>

<template>
  <div class="borderBox relative">
    <img class="absolute top-0 left-0 w-[100%] h-[100%]" :src="bgs[backgroundImage]" alt="">
    <div v-if="title" class="title ff-YouSheBiaoTiHei mt-[22px] ml-[49px] relative z-10">{{ title }}</div>
    <div v-if="backgroundImage == 3" class="text-[10px] text-[#808080] absolute top-[41px] right-[40px]">注意：本分析报告内容解读仅供参考，亦不应被视为诊疗行为！</div>
<!--    <div class="absolute top-0 left-0 w-[100%] h-[100%] z-1 blurred-overlay1" v-if="backgroundImage == 3"></div>-->
    <div class="absolute top-0 left-0 w-[100%] h-[100%] z-1">
      <div class="h-[55px]"></div>
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.borderBox{
  //width: 100%;
  //background: url("@/assets/img/item_bg.png") 0 0/ 100% 100% no-repeat;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  //height: 100%;
  //background: rgba(77,77,77,0.2);
  //border-radius: 24px;
  //border: 1px solid #808080;
  //backdrop-filter: blur(20px);
  //padding: 16px;

  .title{
    display: flex;
    align-items: center;
    justify-content: center;
    //width: 136px;
    width: max-content;
    padding: 0 16px;
    height: 40px;
    //background: rgba(77,77,77,0.2);
    //border-radius: 8px;
    //border: 1px solid #808080;
    //backdrop-filter: blur(20px);
    font-weight: normal;
    font-size: 24px;
    color: rgba(26, 26, 26, 1);
    font-style: normal;
  }
}

.blurred-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 防止覆盖层影响交互 */
  background: rgba(255, 255, 255, 0.5); /* 透明背景 */
  backdrop-filter: blur(1px); /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
  clip-path: polygon(
    3% 17.5%,
    97% 17.5%,
          97% 92%,
  3% 92%
  ); /* 控制模糊区域，这里只是一个示例 */
}

.blurred-overlay1{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 防止覆盖层影响交互 */
  background: rgba(255, 255, 255, 0.5); /* 透明背景 */
  backdrop-filter: blur(1px); /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
  clip-path: polygon(
          24% 10%,
          97% 10%,
          97% 17.2%,
          24% 17.2%
  ); /* 控制模糊区域，这里只是一个示例 */
}
</style>
